<template>
  <nav class="bg-white shadow-lg">
    <div class="max-w-7xl mx-auto px-4">
      <div class="flex justify-between h-16">
        <div class="flex">
          <div class="flex-shrink-0 flex items-center">
            <router-link to="/" class="text-xl font-bold text-gray-800">我的博客</router-link>
          </div>
        </div>
        
        <div class="flex items-center space-x-4">
          <template v-if="isLoggedIn">
            <router-link to="/write" class="bg-green-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-600">
              發表文章
            </router-link>
            <span class="text-gray-600 px-3 py-2">{{ username }}</span>
            <button @click="handleLogout" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">登出</button>
          </template>
          <template v-else>
            <router-link to="/login" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">登錄</router-link>
            <router-link to="/register" class="bg-blue-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-600">註冊</router-link>
          </template>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'

const router = useRouter()
const userStore = useUserStore()

const isLoggedIn = computed(() => userStore.isLoggedIn)
const username = computed(() => userStore.username)

const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}
</script> 